<template>
	<view class="ss-content ss-cmp-switch-content">
		<c-cell-group title="极简调用">
			<c-cell>
				<c-switch v-model="switchCheck" @input="switchInput">
					<text class="slot-left-text">默认选中</text>
				</c-switch>
			</c-cell>
			<c-cell>
				<c-switch v-model="switchNetwork" :loading="loading" @input="simulationRequest">
					<text class="slot-left-text">模拟请求</text>
				</c-switch>
			</c-cell>
			<c-cell>
				<c-switch v-model="switchNetwork1" :loading="loading1" @input="switchInput">
					<text class="slot-left-text">请求选中</text>
				</c-switch>
			</c-cell>
		</c-cell-group>
		<c-cell-group title="列表展示，类似checkbox">
			<c-cell title="按钮禁止点击开关" label="开启后下面的按钮都不可点击">
				<view slot="value">
					<c-switch
					:onVal="true" 
					:offVal="false" 
					selColor="#f9c422" 
					color="#dadada" 
					disabledText="禁止点击" 
					disabled="false"
					onText="开启" 
					offText="关闭" 
					v-model="disableFlag" @input="switchInput" />
				</view>
			</c-cell>
		</c-cell-group>
		<c-switch-group @change="handleGroupChange">
			<c-cell-group>
				<c-cell>
					被选中的id值：{{switchIds}}
				</c-cell>
				<c-cell v-for="(item, index) in switchList" :key="item.value" :title="item.title" :label="item.label">
					<view slot="value">
						<c-switch
							disabledText="我被锁住了"
							:label="item.id" 
							:value="item.checked"
							:disabled="disableFlag" />
					</view>
				</c-cell>
			</c-cell-group>
		</c-switch-group>
		<c-cell-group title="solt使用">
			<c-cell>
				<c-switch v-model="switchRight" @input="switchInput">
					<text slot="right" class="slot-right-text">我在右边</text>
				</c-switch>
			</c-cell>
			<c-cell>
				<c-switch v-model="switchLeft" @input="switchInput">
					<text class="slot-left-text">我在左边</text>
				</c-switch>
			</c-cell>
			<c-cell>
				<c-switch v-model="switchScale" @input="switchInput" scale="0.75">
					<text class="slot-left-text">缩小的按钮</text>
				</c-switch>
			</c-cell>
		</c-cell-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchCheck: true,
				switchRight: false,
				switchLeft: false,
				disableFlag: false,
				switchScale: false,
				loading: false,
				switchNetwork: false,
				loading1: true,
				switchNetwork1: false,
				switchIds: [],
				switchList: [{
					id: 1,
					title: '显示密码',
					label: '输入时短暂显示这些字符',
					checked: false
				},{
					id: 2,
					title: '双击电源键',
					label: '相机',
					checked: false
				},{
					id: 3,
					title: '快速开启助手应用',
					label: '长安电源键0.5秒开启助手应用',
					checked: true
				}]
			}
		},
		onLoad() {
			this.switchIds = this.switchList.filter(o => o.checked).map(o => o.id)
			// 模拟请求返回选中
			setTimeout(() => {
				this.switchNetwork1 = true;
				this.loading1 = false;
			}, 800)
		},
		methods: {
			simulationRequest(e){
				console.log('switch改变值', e);
				this.loading = true;
				// 模拟网络请求
				setTimeout(() => {
					if(Math.random() < 0.5){//网络请求失败
						this.switchNetwork = !e;
						console.log('网络请求失败');
					}else{//网络请求成功
						console.log('网络请求成功');
					}
					this.loading = false;
				}, 500)
			},
			switchInput(e) {
				console.log('switch改变值', e);
				console.log('单个值变化可以用这个方法监听或者自己watch');
			},
			switchChange(e) {
				console.log('switch改变值', e);
				console.log('多个值变化建议用这个方法');
			},
			handleGroupChange(e) {
				console.log(e);
				console.log('列表组发生变化');
				this.switchIds  = e.detail.value;
			}
		}
	}
</script>

<style>
</style>
